<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="优购券名称">
        <br> <br>
        <el-input v-model="formInline.couponName" style="margin-left:-85px;width:200px" placeholder />
      </el-form-item>
      <el-form-item label="优购券状态">
        <br> <br>
        <el-select v-model="formInline.status" style="margin-left:-80px;width:200px">
          <el-option label="全部" value="" />
          <el-option label="启用" value="1" />
          <el-option label="弃用" value="0" />
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="预售商品名称">
        <br> <br>
        <el-input v-model="formInline.goodsName" style="margin-left:-95px;width:200px" placeholder />
      </el-form-item> -->
      <el-form-item label="活动名称">
        <br> <br>
        <el-input v-model="formInline.activityName" style="margin-left:-60px;width:200px" placeholder />
      </el-form-item>
      <el-form-item label="优购券有效期">
        <br> <br>
        <el-date-picker style="margin-left:-85px;width:500px" v-model="formInline.useTimeRange" type="daterange" align="right" unlink-panels
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>

      <div style="width:100%;display:flex;justify-content:flex-end;">
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="$router.push({ path: '/yougouCouponDetail' })" icon="el-icon-edit">新增</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table :data="tableData" v-loading="loading" border style="width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="couponName" label="优购券名称" align="center" />
      <el-table-column prop="suitCount" label="指定门店" align="center" />
      <el-table-column prop="activityName" label="活动名称" align="center" />
      <el-table-column label="优购券有效期" align="center">
        <template slot-scope="scope">
          {{ scope.row.beginDate }} 至 {{ scope.row.endDate }}
        </template>
      </el-table-column>
      <el-table-column prop="expectDistributeTotalAmount" label="发放数量" align="center" />
      <el-table-column prop="realUseTotalAmount" label="使用数量" align="center" />
      <el-table-column prop="createTime" label="优购券状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" v-if="scope.row.status == 0"
            @click="$router.push({ name: 'yougouCouponDetail', params: { activityId: scope.row.activityId, uuid: scope.row.uuid, type: 'edit' } })">
            编辑
          </el-button>
          <el-button type="text" size="mini"
            @click="$router.push({ name: 'yougouCouponDetail', params: { activityId: scope.row.activityId, uuid: scope.row.uuid, type: 'detail' } })">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="margin-top:5px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current"
				:page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
  </div>
</template>

<script>
import { getYougouCouponList, setYougouCoupon } from '@/api/yougouCoupon';
export default {
  data() {
    return {
      formInline: {
        couponName: "",
        status: "",
        activityName: "",
        useTimeRange: []
      },

      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 20
      },
      total: 0
    }
  },

  created() {
    this.search();
  },

  methods: {
    search() {
      this.loading = true;
      getYougouCouponList({
        ...this.listQuery,
        condition: {
          ...this.formInline,
          couponBeginDate: this.formInline.useTimeRange[0] || "",
          couponEndDate: this.formInline.useTimeRange[1] || ""
        }
      }).then(res => {
        if (res.code == 1) {
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
          this.tableData = res.records;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },
    handleSizeChange(value) {
      this.listQuery.size = value;
      this.search();
    },
    handleCurrentChange(value) {
      this.listQuery.current = value;
      this.search();
    },
    changeStatus(row) {
      const initStatus = row.status;
      row.status = row.status == 1 ? 0 : 1;
      this.$confirm(`确定${initStatus == 1 ? "启用" : "停用"}优购券：${row.couponName}吗？`, "温馨提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setYougouCoupon({
          uuid: row.uuid,
          status: initStatus
        }).then((res) => {
          if(res.code == 1) {
            this.$message.success("操作成功");
            this.search();
          }
        })
      })
    }
  }
}
</script>